﻿@{
    ViewBag.Title = "TreeView : Show ContextMenu";
}

<h2>TreeView : Show ContextMenu</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TreeView()
        .Name("MyTreeView")
        .DataBinding(dataBinding => dataBinding
            .Ajax().Select("SelectTreeItems", "TreeView")
        )
        .ClientEvents(events => events.OnLoad("MyTreeView_OnLoad"))
        .Render();
}

<h3>Documentation</h3>
<p>
The TreeView implements the OnLoad client event that calls the WikiPagesTreeView_OnLoad() event handler.
The event handler adds the context menus; one for Category nodes and one for Page nodes.
    
If the node has child nodes, then the tree displays a context menu with a Properties menu item:
<pre class="code">
$('#MyTreeView').data('tTreeView').addContextMenu({
	evaluateNode: function(treeview, node) {
		return node.find('ul').length > 0;
	},
	menuItems: [{
		    text: 'Properties',
		    onclick: MyTreeView_OnProperties
	    }]
});
</pre>

If the node is a Product node, then the tree displays a context menu with Edit, Delete, View and Properties
menu items: 
<pre class="code">
$('#MyTreeView').data('tTreeView').addContextMenu({
	evaluateNode: function(treeview, node) {
		return node.find('ul').length == 0;
	},
	menuItems: [{
		    text: 'Edit',
		    onclick: MyTreeView_OnEdit
        }, {
		    text: 'Delete',
		    onclick: MyTreeView_OnDelete
        }, {
            separator: true
        }, {
		    text: 'Properties',
		    onclick: MyTreeView_OnProperties
	    }]
});
</pre>
</p>


<script type="text/javascript">
    MyTreeView_OnLoad=function (e) {
        $('#MyTreeView').data('tTreeView').addContextMenu({
	        evaluateNode: function(treeview, node) {
		        return node.find('ul').length > 0;
	        },
	        menuItems: [{
		            text: 'Properties',
		            onclick: MyTreeView_OnProperties
	            }]
        });

		$('#MyTreeView').data('tTreeView').addContextMenu({
	        evaluateNode: function(treeview, node) {
		        return node.find('ul').length == 0;
	        },
	        menuItems: [{
		            text: 'Edit',
		            onclick: MyTreeView_OnEdit
                }, {
		            text: 'Delete',
		            onclick: MyTreeView_OnDelete
                }, {
                    separator: true
                }, {
		            text: 'Properties',
		            onclick: MyTreeView_OnProperties
	            }]
        });
    }

	MyTreeView_OnProperties=function (e) {
        alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
    }

    MyTreeView_OnEdit=function (e) {
        alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
    }

    MyTreeView_OnDelete=function (e) {
        alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
    }

    MyTreeView_OnViewPage=function (e) {
        window.location = e.node.find('a').attr('href');
    }
</script>
